<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>专家分组</title>
@include('common-css')
<style>
.input_box {
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input_label {
    width: 120px;
    box-sizing: border-box;
}

.application-list {
    margin-top: 20px;
}

.phase-tag {
    color: #1890ff;
    border: 1px solid #91d5ff;
    border-radius: 3px;
    background: #e6f7ff;
    font-size: 12px;
    padding: 2px 3px;
}

.ant-table-tbody > tr > td, .ant-table-thead > tr > th {
    vertical-align: middle;
    line-height: 25px;
}

.action-table .ant-select {
    width: 120px;
}

.action-table .search-td {
    display: flex;
    justify-content: flex-start;
}

.action-table .ant-input {
    width: 178px;
}

.action-table .search-td .ant-btn {
    margin-left: 16px;
}

.my-pagination {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.common_box {
    position: relative;
}

.search-box {
    position: absolute;
    right: 30px;
    top: 10px;
}

.search-box .ant-input {
    width: 300px;
}

.confirm-save-a {
    color: #52c41a;
}

.confirm-save-a:hover {
    color: #52c41a;
}

.cancel-save-a {
    color: #faad14;
}

.cancel-save-a:hover {
    color: #faad14;
}

.delete-btn-a {
    color: #f5222d
}

.login_input_container {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
}

.add-user-div {
    margin-bottom: 16px;
}

.ant-input-suffix {
    cursor: pointer;
}

.has-group-span {
    color: #f5222d;
}

.modal-action-table .ant-select {
    width: 120px;
}

.modal-action-table tr {
    height: 35px;
}

.modal-action-table .search-td {
    display: flex;
    justify-content: flex-start;
}

.modal-search-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 16px;
}

.modal-search-box .ant-input {
    width: 300px;
}

.total-count-span {
    display: inline-block;
    text-align: center;
    height: 24px;
    width: 24px;
    background-color: #eee;
    margin-right: 8px;
    border-radius: 5px;
    color: #1890ff;
}

.delete-group-bottom-btn {
    margin-top: 16px;
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script id="appTemplate" type="x-template">
<a-locale-provider :locale="antdLocale">
    <div class="container">

        @include('admin.header-tpl')

        <main>
            <div class="common_container">

                @include('admin.aside-tpl')

                <div class="common_content">
                    <div class="common_box">
                        <div class="add-user-div">
                            <a-button type="primary" @click="addGroupModelVisible = true">创建评审小组</a-button>
                        </div>
                        <table class="action-table" v-if="false">

                        </table>
                        <div class="search-box">
                            <a-input v-model="filters.keyword" placeholder="按回车键搜索"
                                     @pressEnter="handleKeywordFilterChange">
                                <a-icon v-show="filters.keyword != ''" slot="suffix" type="close"
                                        style="color:#bfbfbf;font-size:13px"
                                        @click="resetSearch"/>
                            </a-input>
                        </div>
                        <a-table class="application-list"
                                 rowKey="id"
                                 :columns="groupListColumns"
                                 :dataSource="pageData"
                                 :pagination="false"
                        >
                            <template
                                    v-for="col in ['group_name']"
                                    :slot="col"
                                    slot-scope="text, record, index">
                                <div :key="col">
                                    <template v-if="record.editable">
                                        <a-textarea
                                                autosize
                                                style="margin: -5px 0; width:100%;"
                                                :value="text"
                                                @change="e => handleChange(e.target.value,record.id, col)"
                                        />
                                    </template>
                                    <template v-else>
                                        <span>@{{record.group_name}}<br><a-tag v-if="record.locked == 1" color="orange">已安排评审, 不可修改</a-tag></span>
                                    </template>
                                </div>
                            </template>
                            <span slot="leader_name" slot-scope="text, record">
                                    <span v-if="record.leader_name">@{{ record.leader_name}}</span>
                                    <a v-else
                                       @click="showHasSelectedGroupInfo(record.id, record.group_name, record.leader_expert_id)"
                                       style="color:#faad14">点击指定</a>
                                </span>
                            <span slot="allocated" slot-scope="text, record">
                                    <template v-if="record.locked == 0">
                                    <a class="total-count-span"
                                       @click="showHasSelectedGroupInfo(record.id, record.group_name, record.leader_expert_id)">@{{ record.totalCount }}</a>
                                    <a @click="selectGroupProjects(record.id, record.group_name)">添加专家
                                    </a>
                                    </template>
                                    <template v-else>
                                        <a class="total-count-span"
                                           @click="showHasSelectedGroupInfo(record.id, record.group_name, record.leader_expert_id,'readonly')">@{{ record.totalCount }}</a>
                                    </template>
                                </span>
                            <span slot="created_at" slot-scope="text, record">
                                    @{{ record.created_at | shortDateTime }}
                                </span>
                            <template slot="operations" slot-scope="text, record, index">
                                <div class='editable-row-operations'>
                                        <span v-if="record.editable">
                                            <a @click="save(record.id)">保存</a>
                                            <a @click="cancel(record.id)">取消</a>
                                        </span>
                                    <span v-else>
                                            <a @click="() => edit(record.id)">修改名称</a>

                                        <a-dropdown style="margin-left: 12px;" :trigger="['click']"
                                                    v-if="record.locked == 0">
                                            <a class="ant-dropdown-link" href="#">
                                                更多
                                                <a-icon type="down"/>
                                            </a>
                                            <a-menu slot="overlay">
                                                <a-menu-item key="delete-user">
                                                    <a-popconfirm title="确认删除该专家组？"
                                                                  @confirm="handleDeleteGroup(record)"
                                                                  okText="是"
                                                                  cancelText="否">
                                                        <div class="delete-btn-a">删除</div>
                                                    </a-popconfirm>
                                                </a-menu-item>
                                            </a-menu>
                                        </a-dropdown>
                                        </span>
                                </div>
                            </template>
                        </a-table>
                        <div class="my-pagination">
                            <a-pagination :pageSize="pageSize"
                                          :current="currentPage" :total="totalCount"
                                          :showTotal="total => `共 ${total} 条`"
                                          @change="handlePageChange"/>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <a-modal :width="500" v-model="addGroupModelVisible" title="创建评审小组"
                 @ok="handleAddGroup" @cancel="addGroupModelVisible = false">
            <div class="login_input_container">
                <div class="input_box">
                    <div class="input_label">评审小组名称</div>
                    <div class="input_box">
                        <a-input placeholder="如：进步奖-桥梁二组" size="large" v-model="newGroupInfo.group_name"
                                 ref="usernameInput" autoFocus>
                        </a-input>
                    </div>
                </div>
            </div>
        </a-modal>
        <a-modal :width="850" v-model="selectGroupProjectsModelVisible"
                 :title="selectGroupProjectsInfo.group_name">
            <div class="login_input_container">
                <table class="modal-action-table">
                    <tr>
                        <td width="100">分组筛选</td>
                        <td>
                            <a-radio-group size="small" :value="selectGroupProjectsInfo.filters.is_in_group"
                                           @change="handleModelIsInGroupFilterChange">
                                <a-radio-button value="">不限</a-radio-button>
                                <a-radio-button value="has">已分组</a-radio-button>
                                <a-radio-button value="not_has">未分组</a-radio-button>
                                </a-radio-button>
                            </a-radio-group>
                        </td>
                    </tr>
                </table>
                <div class="modal-search-box">
                        <span>
                            <span>
                                共 @{{selectGroupProjectsInfo.unallocated_projects.length}} 条
                            </span>
                            <span style="margin-left: 8px">
                                已选中 @{{selectGroupProjectsInfo.selectedKeys.length}} 条
                            </span>
                        </span>
                    <span>
                            <a-input size="small" v-model="selectGroupProjectsInfo.filters.keyword" placeholder="按回车键搜索"
                                     @pressEnter="handleModelKeywordFilterChange">
                                <a-icon v-show="selectGroupProjectsInfo.filters.keyword != ''" slot="suffix"
                                        type="close" style="color:#bfbfbf;font-size:13px"
                                        @click="resetModelSearch"/>
                            </a-input>
                        </span>
                </div>
                <a-table rowKey="id"
                         size="small"
                         :scroll="{ y: 300 }"
                         :columns="unallocatedProjectsListColumns"
                         :dataSource="selectGroupProjectsInfo.unallocated_projects"
                         :pagination="false"
                         :rowSelection="{selectedRowKeys: selectGroupProjectsInfo.selectedKeys, onChange: onSelectChange}"
                >
                    <span slot="expert_group_id"
                          slot-scope="text, record">@{{ record.expert_group_id ? "已分组" : "未分组"}}</span>
                    {{--                        <template slot="operations" slot-scope="text, record, index">--}}
                    {{--                            <div class='editable-row-operations' v-if="selectGroupProjectsInfo.selectedKeys.indexOf(record.id) != -1">--}}
                    {{--                                <span v-if="selectGroupProjectsInfo.leader_expert_id == record.id">--}}
                    {{--                                    <span>已指定</span>--}}
                    {{--                                    <a @click="addModelCancelAddModelAssignGroupLeader(record.id)">取消</a>--}}
                    {{--                                </span>--}}
                    {{--                                <span v-else>--}}
                    {{--                                    <a @click="addModelAssignGroupLeader(record.id)">指定为组长</a>--}}
                    {{--                                </span>--}}
                    {{--                            </div>--}}
                    {{--                            <span v-else>-</span>--}}
                    {{--                        </template>--}}
                </a-table>
            </div>
            <template slot="footer">
                <a-button key="back" @click="closeSelectGroupProjectsModel">取消</a-button>
                <a-button key="submit" type="primary" @click="handleImportExpertsToExpertGroup">
                    确认添加
                </a-button>
            </template>
        </a-modal>
        <a-modal :width="850" v-model="deleteGroupProjectsModelVisible" @cancel="cancelDeleteGroupProjectsModel"
                 :title="deleteGroupProjectsInfo.group_name" :footer="null">
            <div class="login_input_container">
                <template v-if="deleteGroupProjectsInfo.show_type == 'edit'">
                    <div class="modal-search-box">
                        <span>
                            <span>
                                共 @{{deleteGroupProjectsInfo.allocated_projects.length}} 条
                            </span>
                            <span style="margin-left: 8px">
                                已选中 @{{deleteGroupProjectsInfo.selectedKeys.length}} 条
                            </span>
                        </span>
                        <span>
                            <a-input size="small" v-model="deleteGroupProjectsInfo.filters.keyword" placeholder="按回车键搜索"
                                     @pressEnter="handleDeleteModelKeywordFilterChange">
                                <a-icon v-show="deleteGroupProjectsInfo.filters.keyword != ''" slot="suffix"
                                        type="close" style="color:#bfbfbf;font-size:13px"
                                        @click="resetDeleteModelSearch"/>
                            </a-input>
                        </span>
                    </div>
                    <a-table rowKey="id"
                             size="small"
                             :scroll="{ y: 500 }"
                             :columns="allocatedProjectsListColumns"
                             :dataSource="deleteGroupProjectsInfo.allocated_projects"
                             :pagination="false"
                             :rowSelection="{selectedRowKeys: deleteGroupProjectsInfo.selectedKeys, onChange: deleteModelOnSelectChange}"
                    >
                        <span slot="name" slot-scope="text, record">
                            <span>@{{ record.name }}</span>
                            <a-tag v-if="deleteGroupProjectsInfo.leader_expert_id == record.id"
                                   color="orange">组长</a-tag>
                        </span>
                        <template slot="operations" slot-scope="text, record, index">
                            <div class='editable-row-operations'>
                                <span v-if="deleteGroupProjectsInfo.leader_expert_id == record.id">
                                    <a @click="deleteModelCancelAssignGroupLeader(record.id, deleteGroupProjectsInfo.group_id)">取消组长</a>
                                </span>
                                <span v-else>
                                    <a @click="deleteModelAssignGroupLeader(record.id, deleteGroupProjectsInfo.group_id)">指定组长</a>
                                </span>
                            </div>
                        </template>
                    </a-table>
                    <div class="delete-group-bottom-btn">
                        <a-button key="submit" @click="handleDeleteExpertsInGroup"
                                  :disabled="deleteGroupProjectsInfo.selectedKeys.length < 1">
                            移出专家组
                        </a-button>
                    </div>
                </template>
                <template v-else>
                    <div class="modal-search-box">
                        <span>
                            <span>
                                共 @{{deleteGroupProjectsInfo.allocated_projects.length}} 条
                            </span>
                        </span>
                        <span>
                            <a-input size="small" v-model="deleteGroupProjectsInfo.filters.keyword" placeholder="按回车键搜索"
                                     @pressEnter="handleDeleteModelKeywordFilterChange">
                                <a-icon v-show="deleteGroupProjectsInfo.filters.keyword != ''" slot="suffix"
                                        type="close" style="color:#bfbfbf;font-size:13px"
                                        @click="resetDeleteModelSearch"/>
                            </a-input>
                        </span>
                    </div>
                    <a-table rowKey="id"
                             size="small"
                             :scroll="{ y: 500 }"
                             :columns="allocatedProjectsListColumns"
                             :dataSource="deleteGroupProjectsInfo.allocated_projects"
                             :pagination="false"
                    >
                        <span slot="name" slot-scope="text, record">
                            <span>@{{ record.name }}</span>
                            <a-tag v-if="deleteGroupProjectsInfo.leader_expert_id == record.id"
                                   color="orange">组长</a-tag>
                        </span>
                        <template slot="operations" slot-scope="text, record, index">
                            <div class='editable-row-operations'>
                                -
                            </div>
                        </template>
                    </a-table>
                </template>
            </div>
        </a-modal>
    </div>
</a-locale-provider>
</script>

@include('common-js')

@include('admin.header-js')
@include('admin.aside-js')

<script>
const groupListColumns = [
    {
        width: 80,
        title: '序号',
        dataIndex: 'num'
    }, {
        width: 150,
        title: '名称',
        dataIndex: 'group_name',
        scopedSlots: {
            customRender: 'group_name'
        }
    }, {
        width: 100,
        title: '组长',
        dataIndex: 'leader_name',
        scopedSlots: {
            customRender: 'leader_name'
        }
    }, {
        width: 120,
        title: '组内专家',
        dataIndex: 'allocated',
        scopedSlots: {
            customRender: 'allocated'
        }
    }, {
        width: 120,
        title: '创建时间',
        dataIndex: 'created_at',
        scopedSlots: {
            customRender: 'created_at'
        }
    }, {
        width: 160,
        title: '操作',
        dataIndex: 'operations',
        scopedSlots: {
            customRender: 'operations'
        }
    }];

const unallocatedProjectsListColumns = [
    {
        width: 100,
        title: '序号',
        dataIndex: 'num'
    }, {
        width: 120,
        title: '姓名',
        dataIndex: 'name',
        scopedSlots: {
            customRender: 'name'
        }
    }, {
        width: 160,
        title: '工作单位',
        dataIndex: 'work_org_name',
        scopedSlots: {
            customRender: 'work_org_name'
        }
    },
    {
        width: 100,
        title: '是否已分组',
        dataIndex: 'expert_group_id',
        scopedSlots: {
            customRender: 'expert_group_id'
        }
    }
];

const allocatedProjectsListColumns = [
    {
        width: 100,
        title: '序号',
        dataIndex: 'num'
    }, {
        width: 120,
        title: '姓名',
        dataIndex: 'name',
        scopedSlots: {
            customRender: 'name'
        }
    }, {
        width: 160,
        title: '工作单位',
        dataIndex: 'work_org_name',
        scopedSlots: {
            customRender: 'work_org_name'
        }
    }, {
        width: 140,
        title: '操作',
        dataIndex: 'operations',
        scopedSlots: {
            customRender: 'operations'
        }
    }
];

function processGroupsData(pageData, page) {
    var n = (page - 1) * 10 + 1
    pageData.forEach(item => {
        item.num = n
        n += 1
    })
    return pageData
}

function processDataAddNum(data) {
    var n = 1
    data.forEach(item => {
        item.num = n
        n += 1
    })
    return data
}

Vue.prototype.$axios = axios
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        isSending: false,
        addGroupModelVisible: false,
        newGroupInfo: {
            group_name: '',
        },
        groupListColumns: groupListColumns,
        cacheData: [],
        currentPage: 1,
        pageSize: 10,
        pageData: [],
        totalCount: 0,
        filters: {
            sortBy: '',
            awardTypeId: '',
            keyword: ''
        },
        unallocatedProjectsListColumns: unallocatedProjectsListColumns,
        selectGroupProjectsModelVisible: false,
        selectGroupProjectsInfo: {
            filters: {
                keyword: '',
                is_in_group: ''
            },
            group_id: '',
            group_name: '',
            unallocated_projects: [],
            selectedKeys: [],
            targetKeys: [],
            leader_expert_id: ''
        },
        allocatedProjectsListColumns: allocatedProjectsListColumns,
        deleteGroupProjectsModelVisible: false,
        deleteGroupProjectsInfo: {
            filters: {
                keyword: '',
            },
            group_id: '',
            group_name: '',
            allocated_projects: [],
            selectedKeys: [],
            targetKeys: [],
            leader_expert_id: '',
            show_type: 'edit'
        },
        asideSelectedKeys: ['专家初评-专家分组'],
        antdLocale: antd.locales.zh_CN,
        ...AdminHeader.data,
        ...AdminAside.data,
    },
    filters: {
        shortDateTime(value) {
            if (value) {
                return moment(value).format('Y/M/D H:mm')
            }
            return value
        }
    },
    computed: {
        hasSelected() {
            return this.selectGroupProjectsInfo.selectedKeys.length > 0
        }
    },
    mounted() {
        this.fetchData()
        this.reloadAsideData()
    },
    methods: {
        deleteModelCancelAssignGroupLeader(expert_id, group_id) {
            let _this = this
            megLoading('正在操作', 0)
            axios.post('/api/db/update', {
                model: 'ExpertGroup',
                check_locked: true,
                records: [
                    {
                        id: group_id,
                        leader_expert_id: null
                    }
                ]
            }).then(res => {
                megDestroy()
                if (res.data.ok) {
                    megSuccess('取消成功')
                    _this.deleteGroupProjectsInfo.leader_expert_id = ''
                    _this.fetchData('not_edit')
                } else {
                    megError(res.data.message)
                }
            })
        },
        deleteModelAssignGroupLeader(expert_id, group_id) {
            let _this = this
            megLoading('正在操作', 0)
            axios.post('/api/db/update', {
                model: 'ExpertGroup',
                check_locked: true,
                records: [
                    {
                        id: group_id,
                        leader_expert_id: expert_id
                    }
                ]
            }).then(res => {
                megDestroy()
                if (res.data.ok) {
                    megSuccess('指定组长成功')
                    _this.deleteGroupProjectsInfo.leader_expert_id = expert_id
                    _this.fetchData('not_edit')
                } else {
                    megError(res.data.message)
                }
            })
        },
        addModelCancelAddModelAssignGroupLeader() {
            this.selectGroupProjectsInfo.leader_expert_id = ''
        },
        addModelAssignGroupLeader(expertId) {
            this.selectGroupProjectsInfo.leader_expert_id = expertId
        },
        deleteModelOnSelectChange(selectedRowKeys) {
            this.deleteGroupProjectsInfo.selectedKeys = selectedRowKeys
        },
        cancelDeleteGroupProjectsModel() {
            this.deleteGroupProjectsInfo.allocated_projects = []
            this.deleteGroupProjectsInfo.selectedKeys = []
            this.deleteGroupProjectsInfo.show_type = 'edit'
            this.deleteGroupProjectsModelVisible = false;
        },
        handleDeleteExpertsInGroup() {
            let _this = this
            this.$confirm({
                title: '操作确认',
                content: '确认将所选专家移出该专家组吗？',
                okType: 'danger',
                maskClosable: true,
                onOk() {
                    megLoading('正在操作')
                    let deleteGroupProjectsInfo = _this.deleteGroupProjectsInfo
                    axios.post("/api/auth/delete-experts-in-expert-group", {
                        group_id: deleteGroupProjectsInfo.group_id,
                        delete_expert_ids: JSON.stringify(deleteGroupProjectsInfo.selectedKeys)
                    }).then(res => {
                        megDestroy()
                        if (res.data.ok) {
                            megSuccess('操作成功')
                            _this.deleteGroupProjectsInfo.unallocated_projects = []
                            _this.deleteGroupProjectsInfo.selectedKeys = []
                            _this.deleteGroupProjectsModelVisible = false;
                            _this.fetchData('is_import')
                        } else {
                            megError(res.data.message)
                        }
                    })
                },
                onCancel() {
                    return false
                },
            });
        },
        showHasSelectedGroupInfo(group_id, group_name, leader_expert_id, show_type = 'edit') {
            this.deleteGroupProjectsInfo.group_name = group_name
            this.deleteGroupProjectsInfo.group_id = group_id
            this.deleteGroupProjectsInfo.leader_expert_id = leader_expert_id
            this.deleteGroupProjectsInfo.show_type = show_type
            this.fetchDeleteModelData()
        },
        resetDeleteModelSearch() {
            this.deleteGroupProjectsInfo.filters.keyword = ''
            this.fetchDeleteModelData()
        },
        handleDeleteModelKeywordFilterChange(e) {
            this.deleteGroupProjectsInfo.filters.keyword = e.target.value
            this.fetchDeleteModelData()
        },
        fetchDeleteModelData() {
            megLoading('正在读取')
            axios.post("/api/auth/get-selected-group-expert-info", {
                group_id: this.deleteGroupProjectsInfo.group_id,
                filters: this.deleteGroupProjectsInfo.filters
            }).then(res => {
                megDestroy()
                if (res.data.ok) {
                    this.deleteGroupProjectsInfo.allocated_projects = processDataAddNum(res.data.allocatedProjects)
                    this.deleteGroupProjectsModelVisible = true;
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        resetModelSearch() {
            this.selectGroupProjectsInfo.filters.keyword = ''
            this.fetchModelData()
        },
        handleModelIsInGroupFilterChange(e) {
            this.selectGroupProjectsInfo.filters.is_in_group = e.target.value
            this.fetchModelData()
        },
        handleModelKeywordFilterChange(e) {
            this.selectGroupProjectsInfo.filters.keyword = e.target.value
            this.fetchModelData()
        },
        fetchModelData() {
            megLoading('正在读取')
            axios.post("/api/auth/get-add-group-expert-info", {
                group_id: this.selectGroupProjectsInfo.group_id,
                filters: this.selectGroupProjectsInfo.filters
            }).then(res => {
                megDestroy()
                console.log(res)
                if (res.data.ok) {
                    this.selectGroupProjectsInfo.unallocated_projects = processDataAddNum(res.data.unAllocatedProjects)
                    this.selectGroupProjectsModelVisible = true;
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        onSelectChange(selectedRowKeys) {
            this.selectGroupProjectsInfo.selectedKeys = selectedRowKeys
        },
        closeSelectGroupProjectsModel() {
            this.selectGroupProjectsInfo.unallocated_projects = []
            this.selectGroupProjectsInfo.selectedKeys = []
            this.selectGroupProjectsInfo.leader_expert_id = ''
            this.selectGroupProjectsModelVisible = false;
        },
        handleImportExpertsToExpertGroup() {
            if (this.selectGroupProjectsInfo.selectedKeys.length < 1) {
                antd.message.warn('请至少选择一个评审专家', 1)
                return false
            }
            antd.message.loading('正在提交', 0)
            let selectGroupProjectsInfo = this.selectGroupProjectsInfo
            let leader_expert_id = selectGroupProjectsInfo.leader_expert_id
            let relationsArr = this.getTargetGroupRelationsInfo(selectGroupProjectsInfo.selectedKeys, selectGroupProjectsInfo.group_id)
            axios.post("/api/auth/import-experts-to-expert-group", {
                group_id: selectGroupProjectsInfo.group_id,
                leader_expert_id,
                new_relations: JSON.stringify(relationsArr)
            }).then(res => {
                megDestroy()
                console.log(res)
                if (res.data.ok) {
                    this.$message.success('添加成功', 1)
                    this.selectGroupProjectsInfo.unallocated_projects = []
                    this.selectGroupProjectsInfo.selectedKeys = []
                    this.selectGroupProjectsModelVisible = false;
                    this.fetchData('is_import')
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        renderItem(item) {
            let myGroupId = this.selectGroupProjectsInfo.group_id
            let customLabel = `${item.award_type}-${item.title}`
            if (item.application_group_id && item.application_group_id != myGroupId) {
                customLabel = `(已分组) ${item.award_type}-${item.title}`
            }
            return {
                label: customLabel,
                value: item.title
            };
        },
        filterOption(inputValue, option) {
            return option.project_name.indexOf(inputValue) > -1;
        },
        handleChangeGroupInfo(targetKeys, direction, moveKeys) {
            console.log(targetKeys, direction, moveKeys);
            this.selectGroupProjectsInfo.targetKeys = targetKeys
        },
        selectGroupProjects(group_id, group_name) {
            this.selectGroupProjectsInfo.group_name = group_name
            this.selectGroupProjectsInfo.group_id = group_id
            this.fetchModelData()
        },
        selectGroupProjectsOld(group_id, group_name) {
            megLoading('正在读取')
            axios.post("/api/auth/get-select-group-expert-info", {
                group_id,
            }).then(res => {
                megDestroy()
                console.log(res)
                if (res.data.ok) {
                    this.selectGroupProjectsInfo.unallocated_projects = this.setKeys(res.data.unAllocatedProjects)
                    console.log('this.selectGroupProjectsInfo.unallocated_projects', this.selectGroupProjectsInfo.unallocated_projects)
                    this.selectGroupProjectsInfo.targetKeys = this.keyToString(res.data.allocatedProjectIds)
                    console.log('this.selectGroupProjectsInfo.targetKeys', this.selectGroupProjectsInfo.targetKeys)
                    this.selectGroupProjectsInfo.group_name = group_name
                    this.selectGroupProjectsInfo.group_id = group_id
                    this.selectGroupProjectsModelVisible = true;
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        getTargetGroupRelationsInfo(data, group_id) {
            let arr = []
            data.forEach(function (item) {
                arr.push({expert_id: parseInt(item), expert_group_id: group_id})
            })
            console.log(arr)
            return arr
        },
        keyToString(data) {
            let targetKeys = []
            data.forEach(function (item) {
                targetKeys.push(item.toString())
            })
            return targetKeys
        },
        setKeys(data) {
            let that = this
            data.forEach(function (item) {
                item.key = item.id.toString()
                item.award_type = that.findAwardInfoById(item.award_id).name
                item.title = item.project_name || '未命名'
            })
            return data
        },
        handleAddGroup() {
            let {group_name} = this.newGroupInfo
            if (this.isSending) return
            if (!group_name) return megError("请填写专家组名称")
            this.isSending = true
            megLoading('正在提交...')
            this.$axios.post("/api/db/create", {
                model: 'ExpertGroup',
                records: [
                    {
                        group_name
                    }
                ],
                unique: [
                    {
                        'field_name': 'group_name',
                        'error_message': '该专家组名称已被使用，请更换其他名称'
                    }
                ],
            }).then(res => {
                megDestroy()
                this.isSending = false
                if (res.data.ok) {
                    megSuccess('添加成功')
                    history.go(0)
                } else {
                    megError(res.data.message)
                }
            })
        },
        resetSearch() {
            // this.currentPage = 1
            this.filters.keyword = ''
            this.fetchData()
        },
        handleAwardTypeFilterChange(e) {
            this.filters.awardTypeId = e.target.value
            this.fetchData()
        },
        handleKeywordFilterChange(e) {
            this.filters.keyword = e.target.value
            this.fetchData()
        },
        fetchData(type = 'is_edit') {
            if (type === 'is_edit') {
                megLoading('正在读取')
            }
            axios.get('/api/auth/get-expert-group-page-data', {
                params: {
                    page: this.currentPage,
                    pageSize: this.pageSize,
                    filters: this.filters
                }
            }).then(res => {
                megDestroy()
                this.pageData = processGroupsData(res.data.data, res.data.current_page)
                this.cacheData = this.pageData.map(item => ({...item}))
                this.totalCount = res.data.total
                this.currentPage = res.data.current_page
            })
        },
        handleSortByChange(value) {
            this.sortBy = value;
            this.fetchData()
        },
        handlePageChange(currentPage) {
            this.currentPage = currentPage
            this.fetchData()
        },
        handleDeleteGroup(group) {
            let _this = this
            megLoading('正在处理，请稍候', 0)
            axios.post('/api/auth/delete-expert-group', {
                group_id: group.id,
                type: 0
            }).then(res => {
                megDestroy()
                console.log(res)
                var data = res.data
                if (data.ok) {
                    if (data.message) {
                        _this.$confirm({
                            title: data.message,
                            okType: 'danger',
                            onOk() {
                                axios.post('/api/auth/delete-expert-group', {
                                    group_id: group.id,
                                    type: 1
                                }).then(res => {
                                    megDestroy()
                                    console.log(res)
                                    var data = res.data
                                    if (data.ok) {
                                        antd.message.success('删除成功', 0)
                                        _this.fetchData('is_delete')
                                    } else {
                                        antd.message.warn(data.message, 3)
                                    }
                                })
                            },
                            onCancel() {
                                return false
                            },
                        });
                    } else {
                        antd.message.success('删除成功', 0)
                        _this.fetchData('is_delete')
                    }
                } else {
                    antd.message.warn(data.message, 3)
                }
            })
        },
        updateGroupBasicInfo(id, target, newData) {
            antd.message.loading('正在处理，请稍候', 0)
            axios.post('/api/db/update', {
                model: 'ExpertGroup',
                records: [
                    {
                        id: target.id,
                        group_name: target.group_name
                    }
                ],
                unique: [
                    {
                        'field_name': 'group_name',
                        'error_message': '该专家组名称已被使用，请更换其他名称'
                    }
                ],
            }).then(res => {
                megDestroy()
                console.log(res)
                var data = res.data
                if (data.ok) {
                    delete target.editable
                    this.pageData = newData
                    this.cacheData = newData.map(item => ({...item}))
                    antd.message.success('修改成功', 1)
                    // this.reloadData()
                } else {
                    antd.message.warn(data.message, 3)
                }
            })
        },
        handleChange(value, recordId, column) {
            console.log('rowData-change', value, recordId, column)
            const newData = [...this.pageData]
            const target = newData.filter(item => recordId === item.id)[0]
            if (target) {
                target[column] = value
                this.pageData = newData
            }
        },
        edit(recordId) {
            console.log('edit-id', recordId)
            let newData = [...this.pageData]
            let target = newData.filter(item => recordId === item.id)[0]
            console.log('edit-target', target)
            if (target) {
                target.editable = true
                this.pageData = newData
            }
        },
        save(recordId) {
            const newData = [...this.pageData]
            const target = newData.filter(item => recordId === item.id)[0]
            if (target) {
                if (!target.group_name) {
                    antd.message.warn('名称不能为空')
                    return false
                }
                this.updateGroupBasicInfo(recordId, target, newData)
            }
        },
        cancel(recordId) {
            const newData = [...this.pageData]
            const target = newData.filter(item => recordId === item.id)[0]
            if (target) {
                Object.assign(target, this.cacheData.filter(item => recordId === item.id)[0])
                delete target.editable
                this.pageData = newData
            }
        },
        ...AdminHeader.methods,
        ...AdminAside.methods,
    }
})
</script>